<template>
	<view>
		<u-popup :show="serviceBottom" mode="bottom"  @close="close" @open="open">
			<view class="poput-box">
				<view class="poput-title">
					选择期望服务时间
				</view>
				<view class="poput-title-text">（可选未来7天）</view>
				<view class="tip-title">
					<u-icon name="error-circle" color="coral" size="12"></u-icon>
					<text class="tip-title-font">最终服务时间以服务商与您沟通约定为准，敬请留意！</text>
				</view>
				<view class="poput-service">
				<!-- 	<view class="poput-service-item">
						<view class="poput-service-work" :class="{selected:true}">周二</view>
						<view class="poput-service-day" :class="{selected:true}">今天</view>
						<view class="poput-bottom"></view>
					</view> -->
					<view class="poput-service-item" v-for="(item,index) in datas" @click="selected(index)">
						<view class="poput-service-work"  :style="{ color: selectedIndex === index ? 'blue' : 'black' }">{{item.week}}</view>
						<view class="poput-service-day"  :style="{ color: selectedIndex === index ? 'blue' : 'black' }">{{item.data}}</view>
						<view class="poput-bottom" v-show="selectedIndex === index"></view>
					</view>
					
				</view>
				<view class="poput-time-li">
					<view @click="closeServiceTime(1)" style="margin: 20rpx 20rpx 0rpx 20rpx;" class="poput-time-item">
						<view class="poput-time-item-title" :style="{color:timeIndex===1 ? 'gray' : 'black'}">上午</view>
						<view class="poput-time-item-text">09:00-12:00</view>
					</view>
					<view @click="closeServiceTime(2)" style="margin: 20rpx 20rpx 0rpx 0rpx;" class="poput-time-item">
						<view class="poput-time-item-title" :style="{color:timeIndex2===2 ? 'gray' : 'black'}">下午</view>
						<view class="poput-time-item-text">12:00-18:00</view>
					</view>
					<view @click="closeServiceTime(3)" style="margin: 20rpx 20rpx 0rpx 20rpx;" class="poput-time-item">
						<view class="poput-time-item-title" :style="{color:timeIndex3===3 ? 'gray' : 'black'}">全天</view>
						<view class="poput-time-item-text">09:00-18:00</view>
					</view>
				</view>
				<u-toast ref="uToast"></u-toast>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		props:['serviceBottom'],
		data() {
			return {
				datas:[
					
				],
				selectedIndex:0,
				timeIndex:-1,
				timeIndex2:-1,
				timeIndex3:-1
				
			}
		},
		methods: {
			closeServiceTime(index){
				if(this.timeIndex===index){
					 this.$refs.uToast.show({
					       type: "default",
						   message: "当前时间段不可选"
					  });
					  return;
				}
				if(this.timeIndex2===index){
					 this.$refs.uToast.show({
					       type: "default",
						   message: "当前时间段不可选"
					  });
					  return;
				}
				if(this.timeIndex3===index){
					 this.$refs.uToast.show({
					       type: "default",
						   message: "当前时间段不可选"
					  });
					  return;
				}
				var timeForm="";
				const today = new Date();
				const currentDate = new Date(today);
				currentDate.setDate(today.getDate());
				const year = currentDate.getFullYear();
				const month = String(currentDate.getMonth() + 1).padStart(2, '0');
				const day = String(currentDate.getDate()).padStart(2, '0');
				if(index===1){
					if(this.selectedIndex===0){
						timeForm=`${month}月${day}日 9:00-12:00`;
					}else{
						timeForm=this.datas[this.selectedIndex].data+" 9:00-12:00"
					}
				}
				if(index===2){
					if(this.selectedIndex===0){
						timeForm=`${month}月${day}日 12:00-18:00`;
					}else{
						timeForm=this.datas[this.selectedIndex].data+" 12:00-18:00"
					}
				}
				if(index===3){
					if(this.selectedIndex===0){
						timeForm=`${month}月${day}日 9:00-18:00`;
					}else{
						timeForm=this.datas[this.selectedIndex].data+" 9:00-18:00"
					}
				}
				this.$emit('child-service', timeForm);
			},
			getNextFiveDays() {
			  const dates = [];
			  const weeks = [];
				const today = new Date();
				const weekday = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
				for (let i = 0; i < 6; i++) {
					const currentDate = new Date(today);
					currentDate.setDate(today.getDate() + i);
					const year = currentDate.getFullYear();
					const month = String(currentDate.getMonth() + 1).padStart(2, '0');
					const day = String(currentDate.getDate()).padStart(2, '0');
					const week = weekday[currentDate.getDay()];
					var dataTep = `${month}月${day}日`;
					if(i===0){
						dataTep = "今天"
					}
					this.datas.push({
						data:dataTep,
						week:`${week}`
					})
				}
				console.log(this.datas)
			},
			selectTime(index){
				if(index===0){
					const now = new Date();
					const currentHour = now.getHours();
					if(currentHour < 9 && currentHour < 12){
						this.timeIndex=-1;
					}else if((currentHour < 12 && currentHour < 18)){
						this.timeIndex=1;
						this.timeIndex2=-2;
						this.timeIndex3=-3;
					}else{
						this.timeIndex=1;
						this.timeIndex2=2;
						this.timeIndex3=3;
					}
				}else{
					this.timeIndex=-1;
					this.timeIndex2=-2;
					this.timeIndex3=-3;
				}
			
			},
			selected(index){
				this.selectedIndex=index;
				this.selectTime(index);
			}

		},
		mounted(){
			this.getNextFiveDays();
			this.selectTime(0);
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		}
	}
</script>

<style lang="scss" scoped>
	.poput-time-item-selected{
		border:1rpx solid dodgerblue;
		background-color: white;
	}
	.poput-font-selected{
		color:dodgerblue;
	}
	.poput-time-item-title{
		font-size: 20rpx;
		font-weight: bold;
	}
	.poput-time-item-text{
		font-size: 16rpx;
		color: gray;
	}
	.poput-time-li{
		display: flex;
		flex-wrap: wrap;
		text-align: center;
	}
	.poput-time-item{
		box-sizing: border-box;
		width:45.8%;
		padding: 10rpx;
		border-radius: 15rpx;
		background-color:ghostwhite;
	}
	.poput-bottom{
		width: 16rpx;
		height:5rpx;
		background-color: blue;
		border-radius: 15rpx;
		position: absolute;
		bottom: 0;
		left: 44%;
		
	}
	.poput-service{
		display: flex;
		border-bottom: 1rpx solid gainsboro;
	}
	.poput-service-day{
		font-size: 14rpx;
	}
	.poput-service-work{
		font-size: 20rpx;
	}
	.selected{
		color:blue;
	}
	.closeed{
		color:black;
	}
	.poput-service-item{
		position: relative;
		width: 20%;
		padding: 15rpx 0rpx 15rpx 0rpx;
		text-align: center;
		color:black;
	}
	.tip-title-font{
		font-size: 16rpx;
		margin-left: 2rpx;
		color: coral;
	}
	.tip-title{
		margin-top: 20rpx;
		height: 30rpx;
		background-color: mistyrose;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 10rpx;
	}
	.poput-box{
		height: 600rpx;
		position: relative;
	}
	.poput-title-text{
		text-align: center;
		font-size: 15rpx;
		color:gray;
	}
	.poput-title{
		padding: 20rpx 0rpx 0rpx 0rpx;
		text-align: center;
	}
	.poput-bottom{
		
	}
</style>
